<template>
  <div class="register">
    <div class="register-top">
      <div class="logo">
        <img src="../assets/img/login&register/svg/logo-black.svg" alt="" />
      </div>
      <h2>注册</h2>
    </div>
    <div class="register-information">
      <div class="information">
        <div>
          <input type="text" v-model="name" @blur="nameBlur" placeholder="请输入姓名" />
          <span>{{nameInput}}</span>
        </div>
        <div>
          <input type="text" v-model="phone" @blur="phoneBlur" placeholder="请输入手机号" />
          <span>{{phoneInput}}</span>
        </div>
        <div>
          <input type="password" v-model="password" placeholder="请输入密码" />
          <span>{{password}}</span>
        </div>
        <div>
          <input  class="submit" type="submit" @click="registrationRequest(userInfo)" value="下一步" />
        </div>
      </div>
      <!-- <div class="login-link">
        <a href="">立即登录</a>
      </div> -->
      <router-link :to="'/account'">立即登录</router-link>
    </div>
  </div>
</template>

<script>
import {register,login} from '../assets/js/request.js'
import {nameVerification} from '../assets/js/func.js'

// 正则规则
let nameReg = /^[a-zA-Z][a-zA-Z0-9_]{2,15}$/;
let phoneReg = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;

export default {
    data() {
        return {
            name:"",
            phone:"",
            password:"",
            // userInfo: {}
            infoArr:["姓名","手机"],
            nameInput:'',
            phoneInput:'',

            // 输入错误的提示的样式
            // isShow:false,
            // danger:{display:'none'}

        }
    },
    computed: {
      userInfo() {
        return {"name":this.name,"phone":this.phone,"password":this.password,"type":'1'};
      }
    },
    methods: {
      // 姓名检验
        nameBlur() {
          if(this.name === '') {
            this.nameInput = '姓名不能为空'
          }else if(!nameReg.test(this.name)) {
            this.nameInput = '姓名格式不正确'
          }else {
            this.nameInput = ''
          }
          // nameVerification(this.name,this.nameInput,nameReg)
        },
        
        // 手机号检验
        phoneBlur() {
          if(this.phone === '') {
            this.phoneInput = '手机号不能为空'
          }else if(!phoneReg.test(this.phone)) {
            this.phoneInput = '姓名格式不正确'
          }else {
            this.phoneInput = ''
          }
        },
        registrationRequest(data) {
          // console.log(data);
          if((this.name!=='' && this.nameInput === '') && (this.phone!=='' && this.phoneInput ==='')) {
            console.log(data);
            register(data)
            .then(res=>{
              console.log(res);
              login({
                phone:res.phone,
                password:res.password
              })
              .then(res1=>{
                sessionStorage.setItem("user",JSON.stringify(res1))
                this.$router.push('/mydji')
              })
            },res=>{
              console.log(res);
              alert('号码已注册')
            })
          }else {
            if(this.phone === '') {
              this.phoneInput = '手机号不能为空'
            }else if(!phoneReg.test(this.phone)) {
              this.phoneInput = '姓名格式不正确'
            }else {
              this.phoneInput = ''
            }
            if(this.name === '') {
              this.nameInput = '姓名不能为空'
            }else if(!nameReg.test(this.name)) {
              this.nameInput = '姓名格式不正确'
            }else {
              this.nameInput = ''
            }
          }
        }

    }
};
</script>

<style lang="scss" scope>
.register {
  width: 50%;
  padding: 78px 30px;
  .register-top {
    .logo {
      img {
        width: 70px;
      }
    }
    h2 {
      font-size: 30px;
      margin: 18px 0 18px;
    }
  }
  .register-information {
    border-top: 2px solid black;
    width: 315px;
    margin: 0 auto;
    padding-top: 24px;
    .information {
      div {
        position: relative;
        input {
          width: 315px;
          height: 52px;
          border: 0.5px solid black;
          display: block;
          margin: 9px auto 36px;
          padding: 0 18px;
        }
        span {
          display: block;
          text-align: left;
          color: red;
          // margin: 10px 0;
          z-index: 10;
          // display: none;
          position: absolute;
          top: 58px;
          // left: 0;
        }
      }
      .submit {
        background-color: skyblue;
      }
    }
    .login-link {
      margin: 24px 0;
    }
  }
}
// .active {
//   display: block;
// }
</style>